<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="網頁設計,平面設計,插畫" />
        <meta name="description" content="DFUNS個人網站與美工網頁設計教學,CSS,FLASH" />
        <meta name="copyright" content="本網頁著作權 DFUNS 2000-2010 All Rights Reserved."/>
        <meta name="author" content="DFUNS by Away" />
        <title>=DFUNS™= CSS語法教學-滑入式選單</title>
        <style type="text/css"> 
            * {
                margin: 0px;
                padding: 0px;
            }
            body {
                font:13px Arial, Helvetica, sans-serif;
                width: 868px;
                margin: 0 auto;
            }
            #box1 ,#box2 ,#box3 ,#box4 {
                width: 177px;
                float: left;
                margin: 20px;
                display: inline;
                height: 450px;
            }
            #box1 h1 ,#box2 h1 ,#box3 h1 ,#box4 h1{
                background-image: url(images/logoBanner.jpg);
                height: 115px;
                width: 177px;
                text-indent: -3000px;
            }
            .logoBanner1{background-position:0px 0px;}
            .logoBanner2{background-position:0px -115px;}
            .logoBanner3{background-position:0px -230px;}
            .logoBanner4{background-position:0px -345px;}
            .navi li  {
                list-style-type: none;
            }
            .navi li a {
                color: #FFF;
                text-decoration: none;
                background: url(images/menuBg.gif) repeat-x 0px 0px;
                display: block;
                height: 20px;
                padding-top: 5px;
                padding-left: 10px;
            }
            .navi li a:hover{
                background-position: 0px -25px;
                color: #000;
            }
            .navi li ul {
                display: none;
                list-style-type: none;
            }
            .navi li:hover ul{
                display: block;
                height: 225px;
                background: url(images/pdBg.gif) repeat-y;
            }
            .navi li ul li a{
                color: #999;
                background-image: none;
                display: block;
                height: 20px;
                padding-left: 20px;
                padding-top: 5px;
                list-style-type: none;
            }
            .navi li ul li a:hover {
                color: #666;
                padding-left: 15px;
            }
            .tips {
                font:bold 1.2em Arial, Helvetica, sans-serif;
                text-align: center;
                height: 25px;
                width: 400px;
                clear: both;
                padding-top: 10px;
                margin: 0px auto 20px auto;
                border: 1px dotted #999;
                /*border: 1px red solid;*/
            }
            #footer {
                color: #FFF;
                background:#000 url(images/logo_sonystyle.gif) no-repeat 690px center;
                height: 50px;
                width: 810px;
                clear: both;
                padding: 10px;
                margin:0 auto;
            }
            #footer h1 {
                font-size: 2em;
            }
            #footer a {
                color: #999;
            }
        </style>
    </head>

    <body>
        <!--電腦及週邊商品區域 -->
        <div id="box1">
            <h1 class="logoBanner1">電腦及週邊商品</h1>
            <ul class="navi">
                <li><a href="#">VAIO筆記型電腦</a>
                    <ul>
                        <li><a href="#">P系列</a></li>
                        <li><a href="#">X系列</a></li>
                        <li><a href="#">TT系列</a></li>
                        <li><a href="#">W系列</a></li>
                        <li><a href="#">Z系列</a></li>
                        <li><a href="#">S系列</a></li>
                        <li><a href="#">CW系列</a></li>
                        <li><a href="#">E系列</a></li>
                        <li><a href="#">F系列</a></li>
                    </ul>
                </li>
                <li><a href="#">VAIO家用電腦</a>
                    <ul>
                        <li><a href="#">VGC-JS45TF/Q</a></li>
                        <li><a href="#">VGC-JS45TF/P</a></li>
                        <li><a href="#">VGC-JS35TJ/P</a></li>
                        <li><a href="#">VGC-JS35TJ/S</a></li>
                        <li><a href="#">VGC-JS35TJ/Q</a></li>
                    </ul>
                </li>
                <li><a href="#">專屬攜行包</a>
                    <ul>
                        <li><a href="#">VGP-CP20 </a></li>
                        <li><a href="#">VGP-CKC4/R </a></li>
                        <li><a href="#">VGP-CKC4/W </a></li>
                        <li><a href="#">VGP-CKC4/P </a></li>
                        <li><a href="#">VGP-CPP1/W </a></li>
                        <li><a href="#">VGP-CPP1/R </a></li>
                    </ul>
                </li>
                <li><a href="#">隨身碟及儲存設備</a>
                    <ul>
                        <li><a href="#">外接式薄型DVD燒錄器</a></li>
                        <li><a href="#">藍光光碟機</a></li>
                        <li><a href="#">麥克碟-高速版</a></li>
                        <li><a href="#">Click Classic</a></li>
                        <li><a href="#">王若琳限定版</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--隨身聽音樂設備 -->
        <div id="box2">
            <h1 class="logoBanner2">隨身聽音樂設備</h1>
            <ul class="navi">
                <li><a href="#">Walkman數位隨身聽</a>
                    <ul>
                        <li><a href="#">A系列</a></li>
                        <li><a href="#">X系列</a></li>
                        <li><a href="#">W系列</a></li>
                        <li><a href="#">B系列</a></li>
                        <li><a href="#">E系列</a></li>
                        <li><a href="#">S系列</a></li>
                    </ul>
                </li>
                <li><a href="#">數位錄音筆</a>
                    <ul>
                        <li><a href="#">PCM-M10 </a></li>
                        <li><a href="#">ICD-SX950 </a></li>
                        <li><a href="#">ICD-UX400F 黑色(8GB)</a></li>
                        <li><a href="#">ICD-UX400F 紅色(8GB)</a></li>
                        <li><a href="#">ICD-UX300F 粉紅色(4GB)</a></li>
                        <li><a href="#">ICD-UX200F 銀色(2GB)</a></li>
                        <li><a href="#">ICD-UX200F 黑色(2GB)</a></li>
                        <li><a href="#">ICD-UX200F 粉紅色(2GB)</a></li>
                        <li><a href="#">ICD-PX720 </a></li>
                    </ul>
                </li>
                <li><a href="#">手提／攜帶式音響</a>
                    <ul>
                        <li><a href="#">3合1手提音響</a></li>
                        <li><a href="#">CD手提隨身聽 </a></li>
                        <li><a href="#">卡式錄放音機 </a></li>
                    </ul>
                </li>
                <li><a href="#">其他配件</a>
                    <ul>
                        <li><a href="#">立體聲數位式麥克風 </a></li>
                        <li><a href="#">可攜式藍牙信號傳輸器 </a></li>
                        <li><a href="#">藍牙信號傳輸／接收器 </a></li>
                        <li><a href="#">EX 系列耳機專用替換耳塞 </a></li>
                        <li><a href="#">防滑果凍保護套</a></li>
                        <li><a href="#">專屬皮質保護套 </a></li>
                        <li><a href="#">經濟型低自放充電組 </a></li>
                        <li><a href="#">3號低自放充電電池</a></li>
                        <li><a href="#">HDMI 傳輸線</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--PS 遊戲機及周邊  -->
        <div id="box3">
            <h1 class="logoBanner3">PS遊戲機及周邊 </h1>
            <ul class="navi">
                <li><a href="#">PS3 主機及周邊配件</a>
                    <ul>
                        <li><a href="#">PS3主機(250GB)</a></li>
                        <li><a href="#">PS3主機(120GB)</a></li>
                        <li><a href="#">PS3主機-影像色差連接線</a></li>
                        <li><a href="#">震動式無線控制器(緞布銀)</a></li>
                        <li><a href="#">震動式無線控制器(陶瓷白)</a></li>
                        <li><a href="#">震動式無線控制器(金屬藍)</a></li>
                        <li><a href="#">震動式無線控制器(清透黑)</a></li>
                        <li><a href="#">Blu-ray Disc 遙控器</a></li>
                        <li><a href="#">HDMI 傳輸線</a></li>

                    </ul>
                </li>
                <li><a href="#">PS3 遊戲軟體</a>
                    <ul>
                        <li><a href="#">北斗無雙</a></li>
                        <li><a href="#">MLB 10 the show</a></li>
                        <li><a href="#">鋼彈無雙</a></li>
                        <li><a href="#">惡魔之魂(中英文合版)</a></li>
                        <li><a href="#">太空戰士13(日文版)</a></li>
                        <li><a href="#">戰神3(中英文合版) </a></li>
                        <li><a href="#">三國無雙</a></li>
                        <li><a href="#">阿凡達 </a></li>
                        <li><a href="#">劍魂IV </a></li>
                    </ul>
                </li>
                <li><a href="#">PSP 主機及周邊配件</a>
                    <ul>
                        <li><a href="#">攜帶型遊戲機 </a></li>
                        <li><a href="#">PSP-N1007(鋼琴黑)</a></li>
                        <li><a href="#">PSP-N1007(珍珠白)</a></li>
                        <li><a href="#">PSP-N1007(丁香紫)</a></li>
                        <li><a href="#">PSP-N1007(青翠綠)</a></li>
                        <li><a href="#">PSP-N1007(耀目黃)</a></li>
                    </ul>
                </li>
                <li><a href="#">PSP 遊戲軟體</a>
                    <ul>
                        <li><a href="#">MLB 10 the show</a></li>
                        <li><a href="#">戰艦破壞者 </a></li>
                        <li><a href="#">死神 2 (中文版) </a></li>
                        <li><a href="#">機戰傭兵 3 </a></li>
                        <li><a href="#">新世紀福音戰士 </a></li>
                        <li><a href="#">英靈殿騎士 2 </a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--數位攝影相機  -->
        <div id="box4">
            <h1 class="logoBanner4">數位攝影相機</h1>
            <ul class="navi">
                <li><a href="#">HD 高畫質數位攝影機</a>
                    <ul>
                        <li><a href="#">HDR-XR550 </a></li>
                        <li><a href="#">HDR-XR350 </a></li>
                        <li><a href="#">HDR-CX550 </a></li>
                        <li><a href="#">HDR-CX350 </a></li>
                        <li><a href="#">MHS-PM5K/P </a></li>
                        <li><a href="#">MHS-PM5K/L </a></li>
                        <li><a href="#">MHS-PM5K/W </a></li>
                        <li><a href="#">MHS-PM5K/V </a></li>
                        <li><a href="#">HDR-XR150 </a></li>

                    </ul>
                </li>
                <li><a href="#">HDD 硬碟式數位攝影機</a>
                    <ul>
                        <li><a href="#">DCR-SR68 </a></li>
                        <li><a href="#">HDR-XR100 </a></li>
                        <li><a href="#">DCR-SR87 </a></li>
                        <li><a href="#">DCR-SR65 </a></li>
                    </ul>
                </li>
                <li><a href="#">記憶卡式數位攝影機</a>
                    <ul>
                        <li><a href="#">HDR-CX150/R </a></li>
                        <li><a href="#">HDR-CX150/B </a></li>
                        <li><a href="#">HDR-TG5 </a></li>
                        <li><a href="#">HDR-CX100 </a></li>
                        <li><a href="#">MHS-PM5K </a></li>
                    </ul>
                </li>
                <li><a href="#">Handycam 專屬配件</a>
                    <ul>
                        <li><a href="#">攝影機線控器(A/VR端子)</a></li>
                        <li><a href="#">線控三角架(A/VR端子)</a></li>
                        <li><a href="#">1.7倍/30mm望遠鏡頭</a></li>
                        <li><a href="#">H系列鋰電池 </a></li>
                        <li><a href="#">壁插式電池充電器 </a></li>
                        <li><a href="#">0.7倍/30mm廣角鏡頭</a></li>
                        <li><a href="#">多功能組合式通用攝影包 </a></li>
                        <li><a href="#">10瓦攝影燈 </a></li>
                        <li><a href="#">立體聲聚音麥克風</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tips">適用於IE7、IE8、FireFox、Chrome</div>
        <div id="footer">
            <h1>CSS語法教學 │滑入式選單│</h1>
            <p>DFUNS教學網範例 = <a href="http://www.dfuns.idv.tw">http://www.dfuns.idv.tw</a> =</p>
        </div>
    </body>
</html>

